<template>
  <div>
   <div class="zb-title">
     各园区业务量TOP3
   </div>
   <div class="zb-box">
        <p class="title">单位：万元</p>
        <div class="box">
          <span class="name">
            <span class="ico"><img src="../../../../static/img/1.png" alt=""></span>
            <span class="text">郑州</span>
          </span>
          <span class="num num1">{{formatNumberRgx(1420853)}}</span>
        </div>

        <div class="box">
          <span class="name">
            <span class="ico"><img src="../../../../static/img/2.png" alt=""></span>
            <span class="text">南宁</span>
          </span>
          <span class="num num2">{{formatNumberRgx(206228)}}</span>
        </div>

        <div class="box">
          <span class="name">
            <span class="ico"><img src="../../../../static/img/3.png" alt=""></span>
            <span class="text">内蒙古</span>
          </span>
          <span class="num num3">{{formatNumberRgx(347)}}</span>
        </div>
   </div>
  </div>
</template>

<script>
  export default {
    name: 'zhanbi',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
        this.getEchartData()
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEchartData() {
        const chart1 = this.$refs.yuan;
        if (chart1) {
          const myChart = this.$echarts.init(chart1)
          var that = this;

          const option = {};
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      }
    }
   }
</script>

<style scoped>
  .zb-title{
    width:100%;
    height:.3rem;
    background:url(../../../../static/img/geyuanquyewuliang.png) no-repeat left center;
    color: #ffffff;
    line-height:.3rem;
    font-size:.16rem;
    padding-left:.10rem;
  }
  .zb-box{


     background-size: 100% 100%;
  }
  .zb-box .title{
    text-align:right;
    color:#0ac2dd;
    padding:.1rem 0;
    height:.4rem;
    line-height:.16rem;
    font-size:.12rem;
  }
  .zb-box .box{
    display: flex;
    justify-content: space-between;
    background: url(../../../../static/img/jianbiankuang.png) no-repeat right center;
    height:.3rem;
   align-items: center;
   padding-right:.1rem;
    color:#0ac2dd;
    margin-bottom: .25rem;
    font-size:.14rem;
  }
  .zb-box .box .text{
    padding-left:.05rem;
  }
  .zb-box .num1{
    color:#b7e831;
  }
  .zb-box .num2{
    color:#29e6a6;
  }
  .zb-box .num3{
    color:#25d4fc;
  }
  .yuan{
    width:50%;
    height:50%;

    float:left;
  }
</style>
